<template>
  <div class="app-container">
    <el-table :loading="loading" :data="dataList" @selectionChange="selectionChange" table-layout="auto">
      <el-table-column prop="total" label="答题总数" />
      <el-table-column prop="finish" label="完成数" />
      <el-table-column prop="correct" label="正确数" />
      <el-table-column prop="finishTime" label="完成时间" />
      <el-table-column prop="createTime" label="创建时间" />
      <el-table-column label="操作" align="center" fixed="right">
        <template #default="scope">
          <el-button type="text" size="small" @click="shoDetail(scope.row)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-model:page="queryParam.page" v-model:limit="queryParam.size" :total="total" @change="initList()" />
    <el-dialog v-model="detailDialogVisible" :title="title" width="900px">
      <detail ref="detailObj" :id="detailId"></detail>
    </el-dialog>
  </div>
</template>


<script setup>
import {toRefs, getCurrentInstance, defineExpose, defineProps, ref} from 'vue'
import Pagination from '@/components/Pagination'
import mixins from "@/mixins/mixins";
import detail from '../user/detail.vue'

const { initList, total, dataList, data, selectionChange, } = mixins()
const { queryParam, loading, baseUrl } = toRefs(data)


const { proxy } = getCurrentInstance();

const detailObj = ref()
const detailDialogVisible = ref(false)
const detailId = ref(0)
const title = ref('答题详情')

baseUrl.value = '/userAnswer'

const props = defineProps({
  userId: 0
});
data.queryParam.userId = props.userId
initList()
const initPage = (id) =>{
  data.queryParam.userId = id
  initList()
}
const shoDetail = (row) => {
  title.value = row.createTime + ' - 答题详情'
  detailDialogVisible.value = true
  detailId.value = row.id
  if (detailObj.value) {
    detailObj.value.initPage(row.id);
  }
}
defineExpose({initPage})
</script>
